<template>
<div>
    

    <div>
        <Row>
        <Col span="5">
            <div style="width:150px;margin-top:40px">
            <Upload
            multiple
            type="drag"
            name='avatar'
            action="http://localhost:3000/upload/uploadData">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>上传照片</p>
            </div>
            </Upload>
            </div>
        </Col>
        <Col span="19">
            <div>
            <ButtonGroup style="margin-right:50px;margin-bottom:10px">
            
                <Button type="error" @click="removes">批量删除</Button>
            </ButtonGroup>
        </div>
            <Table border :columns="columns" :data="list" @on-selection-change="onSelectionChange"></Table>
            <Page :total="filter.total" :page-size="filter.rows" @on-change="onPagechange" @on-page-size-change="onPagesizechange" show-sizer ></Page>

        </Col>
    </Row>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return {
            
            list:[],
            ids:[],
            filter:{
                total:0,
                rows:10,
                page:1,
                name:'',
                parentId:0,
                
            },
            columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '图片名称',
                        key: 'filename',
                        render: (h, params) => {
                            return h('div', [
                                h('', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.filename)
                            ]);
                        }
                    },
                   {
                    title:'上传格式',
                    key:'mimetype'
                   },
                   {
                    title:'上传路径',
                    key:'destination'
                   },
                   {
                    title:'图片大小(字节)',
                    key:'size'
                   },
                    {
                        title: '操作',
                        key: 'action',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除'),
                                
                            ]);
                        }
                    }
                ]
        }
    },
    methods:{
        onSelectionChange(){
            var ids=[]
            for(let i=0;i<selection.length;i++){
                ids.push(selection[i]._id)
            }
            this.ids=ids
        },
        onPagechange(page){
            this.filter.page=page;
            this.getlistData()
        },
        onPagesizechange(rows){
            this.filter.rows=rows;
            this.getlistData()
        },
        //删除一个
        remove (params) {
           

            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    this.axios({
                        url:`http://localhost:3000/upload/data/${params.row._id}`,
                        method:'delete'
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //批量删除
        removes(){
            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    

                    this.axios({
                        url:`http://localhost:3000/upload/removes`,
                        method:'post',
                        data:{
                            ids:this.ids.toString()
                        }
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //获取数据
        getlistData(){
            this.axios({
                url:`http://localhost:3000/upload/list`,
            method:'post',
            data:{
                rows:this.filter.rows,
                page:this.filter.page,
                name:this.filter.name,
                parentId:this.filter.parentId
            }
        }).then(res=>{
            console.log(res.data)
            this.list=res.data.rows;
            this.filter.total=res.data.total;
            })
        }
    },
    mounted(){
        this.getlistData()
    }
}
</script>

